#{extends 'admin/main.html' /}
#{set title:'Notice' /}

<h2>메인화면 이미지 관리</h2>
<span>* 아래의 이미지 중 활성화 된 이미지가 랜덤으로 표시됩니다</span>
<a href="@{admin.ImageContents.write()}">추가</a>

<section id="options" class="clearfix">
<div class="option-combo">
 <h3>필터</h3>
      <ul id="filters" class="option-set clearfix" data-option-key="filter" >
        <li><a href="#filter" data-option-value="*" class="selected">전체</a></li>
        <li><a href="#filter" data-option-value=".used">사용중</a></li>
        <li><a href="#filter" data-option-value=".notused">안사용중</a></li>
      </ul>
</div>  
<div class="option-combo">  
    <h3>정렬</h3>

    <ul id="sort-by" class="option-set clearfix" data-option-key="sortBy">
      <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>등록일</a></li>
      <li><a href="#sortBy=name" data-option-value="name">파일명</a></li>
    </ul>
</div>
<div class="option-combo">
    <h3>정렬방식</h3>

    <ul id="sort-direction" class="option-set clearfix" data-option-key="sortAscending">
      <li><a href="#sortAscending=true" data-option-value="true" class="selected">오름차순</a></li>
      <li><a href="#sortAscending=false" data-option-value="false">내림차순</a></li>
    </ul>
</div>
</section>
    
<div id="contents_container">
    
    #{list items:imageFiles, as:'file'}      
    <div class="element used nonmetal   " data-symbol="H" data-category="other">
      <a href="@{admin.ImageContents.view(file.id)}"><img class="symbol" src="/img/thumb/${file.id}" width="145" height="111" border="0" /></a>
      <h2 class="name">${file.title}</h2>
      <p class="content">${file.content}</p>
    </div>
    #{/list}    
        
  </div> <!-- #container -->
  
  <script>
    $(function(){
      
      var $container = $('#contents_container');
      
      $container.isotope({
        itemSelector: '.element'
      });
      
      $('#filters a').click(function(){
    	  var selector = $(this).attr('data-option-value');
    	  $container.isotope({ filter: selector });
    	  return false;
    	});
      
    });
  </script>